<template>
    <div class="ecology-technology">
        <FawaBanner
            url="/newHome/ecology-technology-banner.png"
            title-text-align="left"
            title="The Necessity of Decentralized Governance"
            :text="BannerHintText" />

        <!-- 附加布局 -->
        <div class="additional-content">
            <!-- FAWA's DAO governance framework -->
            <div
                id="frameworkId"
                class="governance-section">
                <h2 class="section-title">FAWA's DAO Governance Framework</h2>
                <p class="section-subtitle">
                    FAWA gradually delegates governance power to the community, with the "Foundation
                    + DAO dual - layer architecture" at its core:
                </p>

                <div class="governance-grid">
                    <div class="governance-item">
                        <div class="governance-icon">
                            <img src="/tokenFawa/icon-bank.png" />
                        </div>
                        <h3 class="governance-title">Foundation</h3>
                        <p class="governance-text">
                            Responsible for the platform's strategic planning, legal compliance, and
                            global development, ensuring operational stability.
                        </p>
                    </div>

                    <div class="governance-item">
                        <div class="governance-icon">
                            <img src="/tokenFawa/icon-globe.png" />
                        </div>
                        <h3 class="governance-title">Community DAO</h3>
                        <p class="governance-text">
                            Composed of users who hold FAWA Tokens, it has the rights to propose,
                            vote, and make decisions.
                        </p>
                    </div>

                    <div class="governance-item">
                        <div class="governance-icon">
                            <img src="/tokenFawa/icon-data.png" />
                        </div>
                        <h3 class="governance-title">Hybrid Governance Model</h3>
                        <p class="governance-text">
                            Initially guided by the Foundation, gradually transitioning to full
                            community autonomy later, achieving true decentralization.
                        </p>
                    </div>
                </div>
            </div>

            <!-- The value of community autonomy -->
            <div
                id="autonomyId"
                class="autonomy-section">
                <h2 class="section-title">The Value of Community Autonomy</h2>

                <div class="autonomy-grid">
                    <div class="autonomy-item">
                        <div class="autonomy-image fairness">
                            <img src="/ecology/community-autonomy-img1.png" />
                        </div>
                        <h3 class="autonomy-title">Fairness</h3>
                        <p class="autonomy-text">
                            Female users are no longer passive participants but core forces in
                            ecological governance.
                        </p>
                    </div>

                    <div class="autonomy-item">
                        <div class="autonomy-image transparency">
                            <img src="/ecology/community-autonomy-img2.png" />
                        </div>
                        <h3 class="autonomy-title">Transparency</h3>
                        <p class="autonomy-text">
                            All governance decisions are publicly recorded on the blockchain,
                            ensuring fairness and transparency and preventing the abuse of power.
                        </p>
                    </div>

                    <div class="autonomy-item">
                        <div class="autonomy-image cohesion">
                            <img src="/ecology/community-autonomy-img3.png" />
                        </div>
                        <h3 class="autonomy-title">Cohesion</h3>
                        <p class="autonomy-text">
                            Through community consensus, users form long-term stickiness in an
                            atmosphere of "being seen and respected."
                        </p>
                    </div>

                    <div class="autonomy-item">
                        <div class="autonomy-image sustainability">
                            <img src="/ecology/community-autonomy-img4.png" />
                        </div>
                        <h3 class="autonomy-title">Sustainability</h3>
                        <p class="autonomy-text">
                            The DAO mechanism ensures the ecology's development does not rely on a
                            single team but is driven collectively by global female users.
                        </p>
                    </div>
                </div>
            </div>

            <!-- FAWA's decentralized social design -->
            <div
                id="decentralizedId"
                class="decentralized-social-section">
                <h2 class="section-title">FAWA's Decentralized Social Design</h2>
                <p class="section-description">
                    FAWA will create a secure, trustworthy, and portable digital identity and social
                    network for female users through an on-chain identity system (Decentralized
                    Identity, DID) and decentralized social protocol:
                </p>

                <div class="social-design-grid">
                    <div class="social-design-card">
                        <div class="social-design-image">
                            <img src="/ecology/social-design-img1.png" />
                        </div>
                        <h3 class="social-design-title">DID Digital Identity</h3>
                    </div>

                    <div class="social-design-card">
                        <div class="social-design-image">
                            <img src="/ecology/social-design-img2.png" />
                        </div>
                        <h3 class="social-design-title">Decentralized Social Network</h3>
                    </div>

                    <div class="social-design-card">
                        <div class="social-design-image">
                            <img src="/ecology/social-design-img3.png" />
                        </div>
                        <h3 class="social-design-title">Cross-Ecosystem Interoperability</h3>
                    </div>
                </div>
            </div>

            <!-- Strategic Value Section 1 -->

            <div id="strategicValueId">
                <h2 class="section-title strategic-value-title">Strategic Value</h2>
                <FunctionalPositioning
                    :items="strategicItems"
                    layout="horizontal"
                    :columns="4" />
            </div>

            <!-- FAWA's Depin Infrastructure Design -->
            <div
                id="infrastructureId"
                class="depin-infrastructure-section">
                <h2 class="section-title">FAWA's Depin Infrastructure Design</h2>
                <p class="section-subtitle">
                    FAWA will build a Depin cluster specifically serving female users and the
                    women's economy, providing comprehensive support for computing power, storage,
                    network, and security:
                </p>

                <div class="depin-grid">
                    <div class="depin-card">
                        <div class="depin-image">
                            <img
                                src="/ecology/infrastructure-design-img1.png"
                                alt="Computing Power Network" />
                        </div>
                        <h3 class="depin-title">Computing Power Network</h3>
                    </div>

                    <div class="depin-card">
                        <div class="depin-image">
                            <img
                                src="/ecology/infrastructure-design-img2.png"
                                alt="Computing Power Network" />
                        </div>
                        <h3 class="depin-title">Storage and Privacy Protection</h3>
                    </div>

                    <div class="depin-card">
                        <div class="depin-image">
                            <img
                                src="/ecology/infrastructure-design-img3.png"
                                alt="Computing Power Network" />
                        </div>
                        <h3 class="depin-title">Network and Communication</h3>
                    </div>

                    <div class="depin-card">
                        <div class="depin-image">
                            <img
                                src="/ecology/infrastructure-design-img4.png"
                                alt="Computing Power Network" />
                        </div>
                        <h3 class="depin-title">Security and Compliance Module</h3>
                    </div>
                </div>
            </div>

            <!-- Strategic Value Section 2 -->
            <div
                id="strategicId"
                class="strategic-value-section-2">
                <h2 class="section-title strategic-value-title">Strategic Value</h2>

                <div class="strategic-grid-2">
                    <div class="strategic-card-2">
                        <div class="strategic-image">
                            <img
                                src="/ecology/strategic-value-2-img1.png"
                                alt="Computing Power Network" />
                        </div>
                        <h3 class="strategic-title">Fair Participation</h3>
                        <p class="strategic-description">
                            By lowering the barrier to hardware and node participation, enable more
                            female users to become contributors and beneficiaries of Depin.
                        </p>
                    </div>

                    <div class="strategic-card-2">
                        <div class="strategic-image">
                            <img
                                src="/ecology/strategic-value-2-img2.png"
                                alt="Safe and reliable" />
                        </div>
                        <h3 class="strategic-title">Security and Trustworthiness</h3>
                        <p class="strategic-description">
                            Distributed architecture ensures data privacy and social safety,
                            providing a trustworthy digital environment for women.
                        </p>
                    </div>

                    <div class="strategic-card-2">
                        <div class="strategic-image">
                            <img
                                src="/ecology/strategic-value-2-img3.png"
                                alt="Value Accumulation" />
                        </div>
                        <h3 class="strategic-title">Value Accumulation</h3>
                        <p class="strategic-description">
                            Every node's contribution will be reflected through the FAWA Token
                            incentive mechanism, forming a model of technical resource as asset.
                        </p>
                    </div>

                    <div class="strategic-card-2">
                        <div class="strategic-image">
                            <img
                                src="/ecology/strategic-value-2-img4.png"
                                alt="Security and Compliance Module" />
                        </div>
                        <h3 class="strategic-title">Global Expansion</h3>
                        <p class="strategic-description">
                            The Depin cluster will serve as the infrastructure for FAWA's entry into
                            different countries and regions, supporting the platform's global
                            development strategy.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    // 添加页面元信息
    // eslint-disable-next-line no-undef
    useHead({
        title: 'Ecology and Technology - Fawa',
        meta: [
            {
                name: 'description',
                content: 'Ecology and Technology solutions page',
            },
        ],
    });

    const BannerHintText = `The core spirit of Web3 is decentralization, but in
        reality, most projects remain in a "pseudo-decentralized" state, with governance power
        overly concentrated in the hands of founding teams and early capital.`

    // 战略价值数据 - 支持 StrategicValue 原本的配置
    const strategicItems = ref([
        {
            title: 'Privacy and Security',
            image: '/ecology/strategic-value-img1.png',
            description:
                "The decentralized identity and social mechanisms can maximize the protection of female users' privacy and security, preventing harassment and data breaches.",
        },
        {
            title: 'Belonging and Identity',
            image: '/ecology/strategic-value-img2.png',
            description:
                "Female users on FAWA are no longer isolated individuals but part of a global women's digital community, forming a strong sense of identity.",
        },
        {
            title: 'Value Accumulation',
            image: '/ecology/strategic-value-img3.png',
            description:
                'User interactions, contributions, and social behaviors will accumulate as on-chain assets, becoming portable and monetizable value credentials.',
        },
        {
            title: 'Ecological Interconnection',
            image: '/ecology/strategic-value-img4.png',
            description:
                'Through DID, female users can participate in broader Web3 applications (DeFi, NFT, RWA, etc.), bridging the boundary between social and finance.',
        },
    ]);

    console.log('EcologyTechnology page mounted');
</script>

<style lang="scss" scoped>
    // 导入响应式 mixins
    @use '@/styles/mixins/responsive' as *;

    .ecology-technology {
        min-height: 100vh;
        background: #fff;

        font-family: 'Figtree', sans-serif;
    }

    .additional-content {
        padding: pxToRem(0) pxToRem(20);
        max-width: pxToRem(1560);
        margin: 0 auto;
        background: #fff;
    }

    .section-title {
        font-family: 'SFProDisplayBlack', sans-serif;
        font-size: pxToRem(56);
        font-weight: 1000;
        color: #000;
        text-align: center;
        margin-bottom: pxToRem(0);
        line-height: 1.2;
        margin-top: pxToRem(179);
    }
    .strategic-value-title {
        font-weight: 600;
        font-family: 'Figtree', sans-serif;
    }

    .section-subtitle {
        font-size: pxToRem(28);
        font-weight: 274;
        color: rgba(0, 0, 0, 0.7);
        text-align: center;
        margin-bottom: pxToRem(60);
        margin-top: pxToRem(17);
        line-height: 1.4;
    }

    // FAWA's DAO governance framework
    .governance-section {
        padding-bottom: pxToRem(179);
    }

    .governance-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: pxToRem(40);
        margin-top: pxToRem(40);
    }

    .governance-item {
        text-align: center;
        padding: 0 pxToRem(30);
        border-radius: pxToRem(16);
        // background: #f8f9fa;
        // transition: transform 0.3s ease, box-shadow 0.3s ease;

        // &:hover {
        //     transform: translateY(-5px);
        //     box-shadow: 0 pxToRem(20) pxToRem(40) rgba(0, 0, 0, 0.1);
        // }
    }

    .governance-icon {
        margin-bottom: pxToRem(20);
        display: flex;
        justify-content: center;
        align-items: center;
        width: pxToRem(80);
        height: pxToRem(80);
        margin: 0 auto;
        text-align: center;
        svg {
            width: pxToRem(80);
            height: pxToRem(80);
        }
        img {
            width: pxToRem(80);
            height: pxToRem(80);
        }
    }

    .governance-title {
        font-family: 'SFProDisplayBold', sans-serif;
        font-size: pxToRem(28);
        font-weight: 700;
        color: #000;
        margin-bottom: pxToRem(19);
        margin-top: pxToRem(19);
    }

    .governance-text {
        font-size: pxToRem(28);
        margin-bottom: pxToRem(0);
        color: #000000b2;
        line-height: 1.2;

        .highlight {
            color: #fd2aa5;
            font-weight: 600;
        }
    }

    // The value of community autonomy
    .autonomy-section {
        margin-bottom: pxToRem(60);
        .section-title {
            margin-top: pxToRem(134);
        }
    }

    .autonomy-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: pxToRem(30);
        margin-top: pxToRem(40);
    }

    .autonomy-item {
        text-align: center;
        padding: pxToRem(0);
    }

    .autonomy-image {
        max-width: pxToRem(360);
        max-height: pxToRem(420);
        border-radius: pxToRem(20);
        margin: 0 auto pxToRem(20);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: pxToRem(48);
        position: relative;
        overflow: hidden;
        box-shadow: 0px pxToRem(4) pxToRem(80) 0px #0000000a;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        // &.fairness {
        //     background: linear-gradient(135deg, #f5f5dc 0%, #e6e6fa 100%);
        // }

        // &.transparency {
        //     background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%);
        // }

        // &.cohesion {
        //     background: linear-gradient(135deg, #f8f8ff 0%, #f0f0f0 100%);
        // }

        // &.sustainability {
        //     background: linear-gradient(135deg, #f0fff0 0%, #e6ffe6 100%);
        // }

        // &::before {
        //     content: '';
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     right: 0;
        //     bottom: 0;
        //     background: rgba(255, 255, 255, 0.1);
        //     border-radius: pxToRem(20);
        // }
    }

    .autonomy-title {
        font-family: 'SFProDisplayBold', sans-serif;
        font-size: pxToRem(32);
        font-weight: 700;
        color: #12141d;
        margin-bottom: pxToRem(12);
    }

    .autonomy-text {
        font-size: pxToRem(24);
        font-weight: 400;
        color: #12141d;
        line-height: 1.5;
    }

    // 响应式设计
    @include tablet {
        .governance-grid {
            grid-template-columns: 1fr;
            gap: pxToRem(30);
        }

        .autonomy-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: pxToRem(25);
        }

        .section-title {
            font-size: pxToRem(36);
        }

        .section-subtitle {
            font-size: pxToRem(20);
        }
    }

    @include mobile {
        .additional-content {
            padding: pxToRem75(88) pxToRem75(20);
        }

        .governance-icon {
            width: pxToRem75(160);
            height: pxToRem75(160);
            img {
                width: pxToRem75(160);
                height: pxToRem75(160);
            }
        }

        .governance-grid {
            grid-template-columns: 1fr;
            gap: pxToRem75(15);
            margin-top: pxToRem75(32);
            margin-bottom: pxToRem75(32);
        }

        .autonomy-grid {
            grid-template-columns: 1fr;
            gap: pxToRem75(30);
        }

        .section-title {
            font-size: pxToRem75(60);
            margin-top: pxToRem75(0);
            margin-bottom: pxToRem75(41);
        }

        .section-subtitle {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(30);
        }

        .governance-item {
            padding: pxToRem75(20);
        }

        .governance-section {
            margin-bottom: pxToRem75(40);
            padding-bottom: pxToRem75(40);
        }

        .governance-title {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(5);
            margin-top: pxToRem75(24);
        }
        .autonomy-section .section-title {
            margin-top: pxToRem75(40);
            margin-bottom: pxToRem75(40);
        }
        .autonomy-grid {
            margin-top: pxToRem75(10);
        }
        .autonomy-item {
            padding: pxToRem75(20);
        }
        .autonomy-image {
            border-radius: pxToRem75(24);
        }
        .autonomy-section {
            margin-bottom: pxToRem75(40);
        }

        .governance-text {
            font-size: pxToRem75(28);
        }

        .autonomy-image {
            width: pxToRem75(300);
            height: pxToRem75(350);
            margin-bottom: pxToRem75(19);
        }

        .autonomy-title {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(19);
        }

        .autonomy-text {
            font-size: pxToRem75(28);
        }
    }

    // FAWA's decentralized social design
    .decentralized-social-section {
        margin-bottom: pxToRem(100);
        padding: pxToRem(60) 0;
    }

    .section-description {
        font-size: pxToRem(20);
        color: rgba(0, 0, 0, 0.7);
        text-align: center;
        margin-bottom: pxToRem(60);
        line-height: 1.5;
        max-width: pxToRem(800);
        margin-left: auto;
        margin-right: auto;
    }

    .social-design-grid {
        width: pxToRem(1316);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: pxToRem(40);
        margin-top: pxToRem(40);
    }

    .social-design-card {
        text-align: center;
        padding: 0 pxToRem(0);
        margin: 0 auto;
        border-radius: pxToRem(16);
        transition: transform 0.3s ease;

        &:hover {
            transform: translateY(-5px);
        }

        &.featured {
            border: 2px solid #74b9ff;
            box-shadow: 0 pxToRem(10) pxToRem(30) rgba(116, 185, 255, 0.2);
        }
    }

    .social-design-image {
        width: 100%;
        height: pxToRem(545);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: pxToRem(20);
        position: relative;
        img {
            width: pxToRem(412);
            height: pxToRem(545);
            object-fit: cover;
        }
    }

    // 响应式设计 - 小于1360px时按百分比伸缩
    @media (max-width: 1360px) {
        .social-design-grid {
            width: 100%;
            max-width: pxToRem(1360);
        }
        
        .social-design-image {
            height: auto;
            
            img {
                width: 100%;
                max-width: pxToRem(412);
                height: auto; // 保持原有比例
                object-fit: contain; // 保持比例，不裁剪
            }
        }
    }

    // 响应式设计 - 小于1024px时按百分比伸缩
    @media (max-width: 1024px) {
        .social-design-grid {
            width: 100%;
            max-width: pxToRem(1024);
        }
        
        .social-design-image {
            height: auto !important;
            
            img {
                width: 100%;
                max-width: pxToRem(300);
                height: auto; // 保持原有比例
                object-fit: contain; // 保持比例，不裁剪
            }
        }
    }

    .tablet-container {
        position: relative;
        width: pxToRem(200);
        height: pxToRem(150);
    }

    .tablet-screen {
        width: 100%;
        height: 100%;
        background: #1a1a1a;
        border-radius: pxToRem(12);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .progress-dial {
        position: relative;
        width: pxToRem(120);
        height: pxToRem(120);
    }

    .dial-arc {
        width: 100%;
        height: 100%;
        border: 3px solid #333;
        border-radius: 50%;
        border-top-color: transparent;
        border-right-color: transparent;
        position: relative;

        &::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            border: 3px solid transparent;
            border-top-color: #ffd700;
            border-right-color: #ffd700;
            border-radius: 50%;
            transform: rotate(45deg);
        }
    }

    .dial-needle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: pxToRem(2);
        height: pxToRem(50);
        background: #ffd700;
        transform-origin: bottom center;
        transform: translate(-50%, -100%) rotate(45deg);
        box-shadow: 0 0 pxToRem(10) #ffd700;
    }

    .dial-ticks {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 50%;

        &::before,
        &::after {
            content: '';
            position: absolute;
            background: #fff;
            border-radius: 50%;
        }

        &::before {
            width: 2px;
            height: 2px;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
        }

        &::after {
            width: 2px;
            height: 2px;
            top: 5px;
            right: 5px;
        }
    }

    .dial-value {
        position: absolute;
        top: 50%;
        right: -pxToRem(20);
        transform: translateY(-50%);
        color: #fff;
        font-size: pxToRem(12);
        font-weight: 700;
        writing-mode: vertical-rl;
        text-orientation: mixed;
    }

    .hands-holding {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: pxToRem(250);
        height: pxToRem(200);
        pointer-events: none;
    }

    .hand-left,
    .hand-right {
        position: absolute;
        width: pxToRem(40);
        height: pxToRem(60);
        background: linear-gradient(135deg, #fdbcb4 0%, #f8a5c2 100%);
        border-radius: pxToRem(20) pxToRem(20) pxToRem(8) pxToRem(8);
        box-shadow: 0 pxToRem(5) pxToRem(15) rgba(0, 0, 0, 0.2);
    }

    .hand-left {
        top: pxToRem(20);
        left: pxToRem(20);
        transform: rotate(-15deg);
    }

    .hand-right {
        top: pxToRem(20);
        right: pxToRem(20);
        transform: rotate(15deg);
    }

    .social-design-title {
        font-size: pxToRem(32);
        font-family: 'SFProDisplayBold', sans-serif;
        font-weight: 700;
        color: #12141d;
        line-height: 1.3;
        margin-top: pxToRem(30);
    }

    // FAWA's Depin Infrastructure Design
    .depin-infrastructure-section {
        margin-bottom: pxToRem(0);
        padding: pxToRem(60) 0;
        border-radius: pxToRem(20);
    }

    .depin-grid {
        max-width: pxToRem(1560);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: pxToRem(30);
        margin-top: pxToRem(40);
    }

    .depin-card {
        background: white;
        border-radius: pxToRem(16);
        // padding: pxToRem(20);
        text-align: center;
        // border: 1px solid #e9ecef;
        // transition: transform 0.3s ease, box-shadow 0.3s ease;
        // &:hover {
        //     transform: translateY(-5px);
        //     box-shadow: 0 pxToRem(20) pxToRem(40) rgba(0, 0, 0, 0.1);
        // }
    }

    .depin-image {
        max-width: pxToRem(360);
        max-height: pxToRem(420);
        border-radius: pxToRem(12);
        overflow: hidden;
        margin-bottom: pxToRem(20);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .depin-title {
        font-size: pxToRem(32);
        font-family: 'SFProDisplayBold', sans-serif;
        font-weight: 700;
        color: #000;
        line-height: 1.3;
    }

    // Strategic Value Section 2
    .strategic-value-section-2 {
        margin-bottom: pxToRem(0);
        padding: pxToRem(60) 0;
    }

    .strategic-grid-2 {
        max-width: pxToRem(1560);
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: pxToRem(30);
        margin-top: pxToRem(40);
    }

    .strategic-card-2 {
        background: white;
        border-radius: pxToRem(16);
        padding: pxToRem(0);
        text-align: center;
        // border: 1px solid #e9ecef;
        // transition: transform 0.3s ease, box-shadow 0.3s ease;

        // &:hover {
        //     transform: translateY(-5px);
        //     box-shadow: 0 pxToRem(20) pxToRem(40) rgba(0, 0, 0, 0.1);
        // }
    }

    .strategic-image {
        max-width: pxToRem(360);
        max-height: pxToRem(420);
        border-radius: pxToRem(12);
        overflow: hidden;
        margin-bottom: pxToRem(20);

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .strategic-title {
        font-size: pxToRem(32);
        font-weight: 700;
        font-family: 'SFProDisplayBold', sans-serif;
        color: #000;
        margin-top: pxToRem(30);
        margin-bottom: pxToRem(16);
        line-height: 1.3;
    }

    .strategic-description {
        font-size: pxToRem(24);
        color: #12141d;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 0;
        margin-bottom: 0;
    }

    // 响应式设计 - 平板端
    @include tablet {
        .social-design-grid {
            grid-template-columns: 1fr;
            gap: pxToRem(30);
        }

        .social-design-image {
            height: pxToRem(250);
        }

        .tablet-container {
            width: pxToRem(180);
            height: pxToRem(135);
        }

        .section-description {
            font-size: pxToRem(18);
            margin-bottom: pxToRem(82);
            margin-top: pxToRem(17);
        }

        .depin-grid,
        .strategic-grid-2 {
            grid-template-columns: repeat(2, 1fr);
            gap: pxToRem(25);
        }

        .depin-image,
        .strategic-image {
            height: pxToRem(150);
        }
    }

    // 响应式设计 - 移动端
    @include mobile {
        .decentralized-social-section {
            padding: pxToRem75(60) 0;
            margin-bottom: pxToRem75(100);
        }

        .social-design-grid {
            width: 100%;
            grid-template-columns: 1fr;
            gap: pxToRem75(30);
            margin-top: pxToRem75(10);
            margin-bottom: pxToRem75(10);
        }

        .social-design-image {
            height: pxToRem75(300);
            margin-bottom: pxToRem75(19);
            img {
                width: pxToRem75(280);
                height: pxToRem75(300);
                border-radius: pxToRem75(24);
            }
        }

        .tablet-container {
            width: pxToRem75(200);
            height: pxToRem75(150);
        }

        .progress-dial {
            width: pxToRem75(100);
            height: pxToRem75(100);
        }

        .dial-needle {
            height: pxToRem75(40);
        }

        .hand-left,
        .hand-right {
            width: pxToRem75(35);
            height: pxToRem75(50);
        }

        .section-description {
            font-size: pxToRem75(28);
            margin-bottom: pxToRem75(30);
        }

        .social-design-title {
            font-size: pxToRem75(28);
            margin-top: pxToRem75(19);
        }

        .strategic-value-section,
        .depin-infrastructure-section,
        .strategic-value-section-2 {
            padding: pxToRem75(60) 0;
            margin-bottom: pxToRem75(100);
        }

        .depin-grid {
            margin: 0 auto;
            margin-bottom: pxToRem75(30);
        }

        .depin-card {
            padding: pxToRem75(0);
            .depin-image {
                margin: 0 auto;
            }
        }

        .depin-infrastructure-section {
            margin-bottom: pxToRem75(0);
        }
        .strategic-value-section-2 {
            padding: pxToRem75(0);
        }

        .depin-grid,
        .strategic-grid-2 {
            grid-template-columns: 1fr;
            gap: pxToRem75(30);
            margin-top: pxToRem75(0);
        }

        .depin-card,
        .strategic-card-2 {
            padding: pxToRem75(0);
            .strategic-image {
                margin: 0 auto;
            }
        }

        .depin-image,
        .strategic-image {
            width: pxToRem75(300);
            height: pxToRem75(350);
            margin-bottom: pxToRem75(19);
        }

        .depin-title,
        .strategic-title {
            font-size: pxToRem75(28);
            margin-top: pxToRem75(19);
            margin-bottom: pxToRem75(19);
        }

        .strategic-description {
            font-size: pxToRem75(28);
        }
    }
</style>
